<template>
<div class="Look">
    <el-form :disabled="editor" :model="message" :rules="rules" ref="message" label-width="150px">
        <el-form-item label="主体名称" v-if="message.subjectType != 1" prop="subjectName">
            <el-input v-model="message.subjectName" disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="subjectLinkman">
            <el-input v-model="message.subjectLinkman"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="subjectTele">
            <el-input v-model="message.subjectTele"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="subjectCard">
            <el-input v-model="message.subjectCard"></el-input>
        </el-form-item>
        <div class="flex">
            <el-form-item label="选择镇街" :disabled="editor" prop="subjectTownId">
                <el-select v-model="message.subjectTownId" @change="changeOptions">
                    <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" @click.native="getIndex(index)"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择村居" prop="subjectVillageId">
                <el-select v-model="message.subjectVillageId">
                    <el-option v-for="(item, index) in optionsChildren" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </div>

        <el-form-item label="地址" prop="subjectAddr">
            <el-input v-model="message.subjectAddr"></el-input>
        </el-form-item>
        <el-form-item required label="行业" prop="systemType">
            <el-radio-group v-model="message.systemType">
                <el-radio label="SS2">种植业</el-radio>
                <el-radio label="SS1">渔业</el-radio>
            </el-radio-group>
        </el-form-item>
         <products>主要产品</products>
        <el-form-item label="年产值(万元)" prop="subjectYearTotalValue">
            <el-input type="number" v-model="message.subjectYearTotalValue" placeholder="（去年）"></el-input>
        </el-form-item>

        <div v-if="message.subjectType != 1">
            <el-form-item label="组织机构代码" class="cooperation">
                <el-input v-model="message.subjectOrgCode" class="cooperate"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" class="cooperation">
                <el-input v-model="message.subjectUscCode" class="cooperate"></el-input>
            </el-form-item>
            <el-form-item label="员工人数" class="cooperation">
                <el-input v-model="message.subjectPersonNum"></el-input>
            </el-form-item>
        </div>

        <el-form-item label="主体介绍">
            <el-input type="textarea" v-model="message.subjectIntro"></el-input>
        </el-form-item>
        <el-form-item label="图片资料">
            <template v-for="item in message.ossImgList">
                <el-image :key="item.id" style="width: 100px; height: 100px" :src="item.imgUrl" :z-index="10000" :preview-src-list="srcList">
                </el-image>
            </template>
        </el-form-item>
        <el-form-item label="补充图片资料" v-if="!editor">
            <Upload style="display: block" @click="getUrlList"></Upload>
        </el-form-item>
        <el-form-item label="" v-show="!editor">
            <el-button type="primary" @click="editSave">修改</el-button>
            <el-button type="info" @click="close">关闭</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import cityOptions from "@/views/mixins/cityOptions.js";
import {
    checkPhone,
    checkUserId,
    checkUserName,
} from "@/library/regexp.js";
import {
    trimArray
} from "@/library";
import {
    mapGetters
} from "vuex";
export default {
     mixins: [cityOptions],
    name: "Look",
    props: {
        subjectFormRow: {
            type: Object,
            required: true
        },
        editor: {
            type: Boolean,
        },
    },
    data() {
        return {
            keyIndex: Math.random(),
            message: {},
            cities: cityOptions,
            checkedCities: [],
            checkAll: false,
            isIndeterminate: true,
            level: 1,
            townIndex: 0,
            items: [],
            orderProduct: false,
            srcList: [],
            srcImgId: [],
            ossList: "",
            rules: {
                subjectName:[{
                    required: true,
                    message: "必填项不能为空",
                    trigger: "blur",
                }],
                subjectCard: [{
                    required: false,
                    // validator: checkUserId("请输入正确的身份证号码"),
                    trigger: "blur",
                } ],
                subjectVillageId: [{
                    required: true,
                    message: "必填项不能为空",
                    trigger: "blur",
                }, ],
                systemType: [{
                    required: true,
                    message: "必须选择一项",
                    trigger: "change",
                }, ],
                subjectYearTotalValue: [{
                    required: true,
                    message: "请输入正确的年产值",
                    trigger: "blur",
                }, ],
                subjectTownId: [{
                    required: true,
                    message: "必选项不能为空",
                    trigger: "change",
                }, ],
                subjectAddr: [{
                    required: true,
                    message: "必填项不能为空",
                    trigger: "blur",
                }, ],
                subjectLinkman: [{
                    required: true,
                    validator: checkUserName("姓名只能由纯汉字组成"),
                    trigger: "blur",
                }, ],
                subjectTele: [{
                    required: true,
                    validator: checkPhone("请填写正确格式的手机号"),
                    trigger: "blur",
                }, ],
            },
        };
    },
    computed: {
        ...mapGetters({
            options: "getTreeData/filtersVillage",
        }),
        optionsChildren: {
            get() {
                return this.options[this.townIndex].children
            },
            set(val) {
                this.townIndex = val
            }
        }
    },
    watch: {
        subjectFormRow: {
            handler(newRow, oldRow) {
                this.init()
            },
            deep: true
        }
    },
    mounted(){
        this.init()
    },
    methods: {
       async init() {
            this.imgList();
            this.checkedCities = []
            this.message = this.subjectFormRow;
            if (this.subjectFormRow.subjectMainProduct == 'null') {
                this.checkedCities = []
            } else {
                if (this.subjectFormRow.subjectMainProduct.indexOf(',') != '-1') {
                    this.checkedCities = this.subjectFormRow.subjectMainProduct.split(',')
                } else {
                    if(this.subjectFormRow.subjectMainProduct != 'null'){
                        this.checkedCities.push(this.subjectFormRow.subjectMainProduct)
                    }else{
                        this.checkedCities = []
                    }
                    
                }
            }

            if (this.subjectFormRow.subjectTownId) {
                this.options.forEach((item, index) => {
                    if (
                        this.subjectFormRow.subjectTownId === item.value
                    ) {
                        this.townIndex = index;
                    }
                });
            }

        },
    handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        console.log(this.checkedCities);
    },
    close() {
        this.$emit("on-close")
    },
    imgList: function () {
        if (this.message.ossImgList instanceof Array) {
            this.message.ossImgList.forEach((item) => {
                this.srcList.push(item.imgUrl);
                this.srcImgId.push(item.id);
            });
        } else {
            this.srcList = [];
        }
    },

    changeOptions() {
        this.message.subjectVillageId = "";
    },
    handleClose(item) {
        this.items.splice(this.items.indexOf(item), 1);
    },
    enter(value) {
        this.items.push(value);
        // this.message.subjectMainProduct = [];
    },
    getUrlList(value) {
        if (!value) value = [];
        this.ossList = trimArray(this.srcImgId.concat(value));
        this.message.imgUrl = this.ossList
    },
    handleClick(row) {
        console.log(row);
    },
    getIndex(val) {
        this.optionsChildren = val;
    },
    editSave() {
        this.$refs["message"].validate((valid) => {
            if (valid) {
                this.message.ossImgList = this.ossList;
                if (this.message.subjectType == '个体') {
                    this.message.subjectType = "P0201"
                } else if (this.message.subjectType == '合作社') {
                    this.message.subjectType = "P0202"
                } else if (this.message.subjectType == '企业') {
                    this.message.subjectType = "P0203"
                }
                this.message.subjectBusiType = 0 // 预留字段，默认是int类型
                this.message.subjectMainProduct = this.checkedCities.join(',')

                delete this.message.landSubjectRs
                this.$axios
                    .post("rbac/data/subject/put", {
                        params: this.message
                    })
                    .then((res) => {
                        if (res.result === "success") {
                            this.$message.success("编辑成功");
                            this.$emit("success", {
                                visible: false,
                                code: 200,
                            });
                        } else {
                            this.$message.warning(res.errorMsg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.response.data.message);
                    });
            } else {
                this.$message.error("请检查必填项是否未填");
                return false;
            }
        });
    },
},
};
</script>
